<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type">
    <meta content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="keywords" content="{$keywords}">
    <meta name="description" content="{$description}">
    <meta name="show-image" content="http://www.66play.com/Public/App/overwatch/images/logo4share.png.jpg" />
    <title>{$title}</title>
    <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/App/overwatch/mobile/css/common.css?v=1.1.1" />
    <script type="text/javascript" src="__PUBLIC__/App/overwatch/mobile/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/App/overwatch/mobile/js/knockout-2.3.0.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/jwplayer/jwplayer.js"></script>
    <script type="text/javascript" src="__PUBLIC__/App/overwatch/mobile/js/plugin.js"></script>
    <script type="text/javascript" src="__PUBLIC__/App/overwatch/mobile/js/mobile_end.js"></script>
    <script type="text/javascript">
        {:C('GLOBAL_BDHM')}
    </script>
</head>

<!-- <body class="defence"> -->
<body>
    <if condition="$type eq 1">
        <header><img src="__PUBLIC__/App/overwatch/mobile/images/banner.jpg"/></header>
    <elseif condition="$type eq 2"/>
        <header><img src="__PUBLIC__/App/overwatch/mobile/images/banner_defence.jpg"/></header>
    <elseif condition="$type eq 3"/>
        <header><img src="__PUBLIC__/App/overwatch/mobile/images/banner_tank.jpg"/></header>
    <elseif condition="$type eq 4" />
        <header><img src="__PUBLIC__/App/overwatch/mobile/images/banner_support.jpg"/></header>
    </if>
    <div class="hightlight font24 JS-highlights" style="display: none;">
        <h1><img src="__PUBLIC__/App/overwatch/mobile/images/highlights.png?v=1.0"/></h1> 
        <h2>精彩集锦</h2>
        <p class="font24">有亮点的玩家视频会被制作成精彩集锦哦</p>
        <div class="hightlvideo">
            <div id="highlights">Loading the player...</div>
        </div>
    </div>

    <!--获奖视频--> 
    <div class="showtime">
        <h1><img src="__PUBLIC__/App/overwatch/mobile/images/title.jpg"/></h1>
        <h2>获奖视频</h2>
        <ul class="preview-ul font24">
            <!-- ko foreach:winnerVideos -->
            <li>
                <if condition="$isFromApp eq true">
                    <a href="" data-bind="attr:{'href':'ly66play://66play?type=video&id='+id}">
                <else />
                    <a href="" data-bind="attr:{'href':videoLink}" target="_blank">
                </if>
                    <div class="preview-img relative">
                        <img src="" data-bind="attr:{'src':thumb}"/>
                        <!-- ko if:$index() == 0 -->
                        <em class="back_orange absolute">1st</em>
                        <!-- /ko -->
                        <!-- ko if:$index() == 1 -->
                        <em class="back_orange absolute">2nd</em>
                        <!-- /ko -->
                        <!-- ko if:$index() == 2 -->
                        <em class="back_orange absolute">3rd</em>
                        <!-- /ko -->
                    </div>
                    <span class="preview-title" data-bind="text:title"></span>
                </a>
            </li>
            <!-- /ko -->
        </ul>
    </div>


    <!--精彩视频--> 
    <div class="preview wonderful">
        <h1><span>精彩视频</span></h1>
        <ul class="preview-ul font24">
            <!-- ko foreach:videos -->
            <li>
                <if condition="$isFromApp eq true">
                    <a href="" data-bind="attr:{'href':'ly66play://66play?type=video&id='+id}">
                <else />
                    <a href="" data-bind="attr:{'href':videoLink}" target="_blank">
                </if>
                    <div class="preview-img relative">
                        <img src="" data-bind="attr:{'src':thumb}"/>
                    </div>
                    <span class="preview-title" data-bind="text:title"></span>
                </a>
            </li>
            <!-- /ko -->
            <div class='loadingMore' data-bind="visible:pending"><img src="__PUBLIC__/App/overwatch/mobile/images/loading-white.gif"/>加载更多...</div>
        </ul>
    </div>
</body>
<script type="text/javascript">
    window._THIS = {
        videoLink : "{:U('home/share/video')}",
        url : "{:U('overwatch/index', ['type' => $type])}",
        pager : {$pager},
        p : 1,
    };
    window._COMMON = {
        PUBLIC : "__PUBLIC__",
    };
    function dataInit() {
        var highlights = {$highlights|json_encode};
        if (highlights) {
            showHighlights(highlights);
        }

        var winnerVideos = {$winnerVideos|json_encode};
        viewModel.winnerVideos(getVideos(winnerVideos));

        var videos = {$videos|json_encode};
        viewModel.videos(getVideos(videos));
        var clientWidth=document.body.clientWidth - 20;
        $(".showtime>.preview-ul>li:first-child .preview-img").height(clientWidth*9/16);
    }
</script>
</html>